<template>
  <div class="wrap">
    <div class="top-banner"></div>
    <div class="container">
      <div class="step">
        <router-link to="/holdall"><span class="active">工具箱</span></router-link>
        &nbsp;&nbsp;<span>/</span>&nbsp;&nbsp;<router-link to="/name_grade"><span>生成八字</span></router-link>
      </div>
      <tips></tips>
      <div class="c-content">
        <div style="max-width: 700px;margin: auto;">
          <el-row class="sex-box">
            <el-col :xl="8"
                    :lg="8"
                    :md="8"
                    :sm="8"
                    :xs="8"
                    class="col-grid">
              <div class="icon-wrap">
                <img class="icon"
                     src="../../assets/images/classicInput/boy.png"
                     @click="ruleForm.sex = 1" />
                <img src="../../assets/images/classicInput/gou.png"
                     class="choose"
                     v-if="ruleForm.sex == 1" />
              </div>
              <div class="sex"
                   :class="[ruleForm.sex == 1 ? 'active' : '']">
                男
              </div>
            </el-col>
            <el-col :xl="8"
                    :lg="8"
                    :md="8"
                    :sm="8"
                    :xs="8"
                    class="col-grid">
              <div class="icon-wrap">
                <img class="icon"
                     src="../../assets/images/classicInput/girl.png"
                     @click="ruleForm.sex = 0" />
                <img src="../../assets/images/classicInput/gou.png"
                     class="choose"
                     v-if="ruleForm.sex == 0" />
              </div>
              <div class="sex"
                   :class="[ruleForm.sex == 0 ? 'active' : '']">
                女
              </div>
            </el-col>
            <el-col :xl="8"
                    :lg="8"
                    :md="8"
                    :sm="8"
                    :xs="8"
                    class="col-grid">
              <div class="icon-wrap">
                <img class="icon"
                     src="../../assets/images/classicInput/weizhi.png"
                     @click="ruleForm.sex = 3" />
                <img src="../../assets/images/classicInput/gou.png"
                     class="choose"
                     v-if="ruleForm.sex == 3" />
              </div>
              <div class="sex"
                   :class="[ruleForm.sex == 3 ? 'active' : '']">
                未知
              </div>
            </el-col>
          </el-row>
          <el-form :model="ruleForm"
                   class="userSignForm demo-ruleForm"
                   ref="ruleForm"
                   :rules="rules"
                   style="padding-top: 40px;"
                   :label-position="labelPosition"
                   :label-width="lWidth">
            <el-row>
              <el-col :span="24"
                      :sm="24">
                <el-form-item label="姓名"
                              prop="firstName"
                              required>
                  <el-input class="len w-100"
                            placeholder="请输入姓名"
                            v-model.trim="ruleForm.firstName"
                            type="text"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="datas"
                              label="出生日期">
                  <el-select placeholder="请选择"
                             style="margin-right:10px;"
                             class="w-100 w-202"
                             v-model="ruleForm.timeType">
                    <el-option v-for="item in timeType"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                  </el-select>
                  <el-date-picker class="w-100 w-202"
                                  type="datetime"
                                  :editable="false"
                                  format="yyyy-MM-dd HH:mm"
                                  placeholder="选择日期时间"
                                  v-model.trim="ruleForm.birthday"
                                  @change="dateChange"
                                  value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                  <!-- <el-date-picker
										class="w-100 w-202"
									    v-model.trim="ruleForm.birthday"
									    type="datetime"
									    format="yyyy-MM-dd HH:mm"
									    placeholder="选择日期时间"
									>
									</el-date-picker> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item v-if="!this.$store.state.isIos">
                  <el-input style="margin-right:10px;"
                            class="len w-100 w-202"
                            type="text"
                            disabled
                            placeholder="选择日期时间"
                            autocomplete="off"
                            v-model="disabledTimeType">
                  </el-input>
                  <el-input class="len w-100 w-202"
                            type="text"
                            disabled
                            placeholder="选择日期时间"
                            autocomplete="off"
                            v-model="ruleForm.anotherDate">
                    <i slot="prefix"
                       class="el-input__icon el-icon-time"></i></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <div class="b">
                <div class="sumbit-btn"
                     @click="submitForm">
                  提 交
                </div>
                <vip-count></vip-count>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
		<clientBtn></clientBtn>
  </div>
</template>

<script>
import calendar from "./lib/timer.js";
import lunar from "./lib/index.js";
import clientBtn from '../../components/clientBtn'
export default {
  components: {
    clientBtn
  },
  data () {
    var firstName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入姓名!'));
      }
      if ((value != '' && value.length < 2) || !/^[\u4e00-\u9fa5]+$/.test(value)) {
        callback(new Error('至少输入2个汉字!'));
      } else {
        callback();
      }
    };
    var birthday = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请选择小孩生日!'));
      } else {
        callback();
      }
    };
    var lastName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入名!'));
      }
      if ((value != '' && value.length > 2) || !/^[\u4e00-\u9fa5]+$/.test(value)) {
        callback(new Error('只能输入2个汉字!'));
      } else {
        callback();
      }
    };
    return {
      timeType: [{
        value: 1,
        label: "公历"
      },
      {
        value: 0,
        label: "农历"
      },
      ],
      ruleForm: {
        firstName: '', // 姓氏
        lastName: "",//名
        sex: 1,
        timeType: 1,
        anotherDate: "",
        birthday: ""
      },
      rules: {
        firstName: [{
          validator: firstName,
          trigger: 'blur'
        },],
        lastName: [{
          validator: lastName,
          trigger: 'blur'
        },]
      },
      labelPosition: "right",
      lWidth: "80px"
    }
  },
  mounted () {
    _MEIQIA('hidePanel');
    let w = window.innerWidth
    if (w > 450) {
      this.labelPosition = "right"
      this.lWidth = "80px"
    } else {
      this.labelPosition = "top"
      this.lWidth = "6em"
    }
  },
  computed: {
    disabledTimeType () {
      if (this.ruleForm.timeType == 1) return '农历';
      else return '公历';
    },
    nongli () {
      let nows = new Date(this.ruleForm.bornTime);
      let Y = nows.getFullYear() + '-';
      let M = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1) + '-';
      let Ys = nows.getFullYear();
      let Ms = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1);
      let D = nows.getDate();
      let h = nows.getHours();
      let m = nows.getMinutes();
      let s = nows.getSeconds();
      let timers = Y + M + D;
      // var timer = this.getLunarDate(timers);
      var timer = this.calendar.Lunar.toLunar(Y, M, D);
      // var nongli = this.toSolar(Y,M,D)
      if (this.ruleForm.datas == 1) {
        //return "农历  " +  timer.lunarYear + '-' + timer.lunarMonth + '-' + timer.lunarDay+" "+h+":"+m+":"+s;
        return "农历  ";
      } else {
        var aaa = calendar.lunar2solar(Ys, Ms, D);
        //return "公历  " + aaa.cYear + '-'+ aaa.cMonth + '-' + aaa.cDay+" "+h+":"+m+":"+s;
        return "公历  ";
        // return nongli[0] + '-' + nongli[1] + '-' + nongli[2]+" "+h+":"+m+":"+s;
      }

    },
    gongli () {
      let nows = new Date(this.ruleForm.birthday);
      let Y = nows.getFullYear() + '-';
      let M = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1) + '-';
      let Ys = nows.getFullYear();
      let Ms = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1);
      let D = nows.getDate();
      let h = nows.getHours();
      let m = nows.getMinutes();
      let s = nows.getSeconds();
      let timers = Y + M + D;
      return ''
    },
    texts () {
      if (this.ruleForm.datas == 1) {
        return "公历/农历"
      } else {
        return "农历/公历"
      }
    },
    isReverse () {
      if (this.ruleForm.datas == 1) {
        return false
      } else {
        return true
      }
    }
  },
  created () {
    let birth_input_info = localStorage.getItem("birth_input_info");
    if (birth_input_info) {
      localStorage.removeItem("birth_input_info");
      birth_input_info = JSON.parse(birth_input_info)
      this.ruleForm = birth_input_info;
    }
    console.log(lunar.Lunar.toSolar(2016, 6, 3))
  },
  methods: {
    // 提交表单
    submitForm (formName) {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.ruleForm.timeType == 0) {
            [this.ruleForm.birthday, this.ruleForm.anotherDate] = [this.ruleForm.anotherDate, this.ruleForm.birthday]
          }
          if (this.ruleForm.birthday == '') {
            return this.$message.error('请填写出生日期');
          }
          // 如果没有登录，跳转登录 
          if (!localStorage.getItem("key")) {
            this.$confirm('您需要登录后才能查询，是否登录后再返回此页？页面信息会保留', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              // 保存本地信息
              localStorage.setItem("birth_input_info", JSON.stringify(this.ruleForm));
              this.$router.push({
                path: "/userlogin",
                query: {
                  jump_path: '/birth_input'
                }
              })
            })
            return;
          }
          if (this.$store.state.count == 0 && this.$store.state.show != true) {
            this.$confirm('您的本月免费次数已用完，请升级会员享受无限次数查询！', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              // 保存本地信息
              this.$router.push({
                path: "/vip_pay"
              })
            })
            return;
          }
          let fuleForm = this.ruleForm

          this.$router.push({
            name: 'birth_detail',
            query: this.ruleForm
          });
        } else {
          return false;
        }
      });
    },
    // 选择日期
    dateChange (val) {
      if (this.$store.state.isIos) {
        return
      }
      let nows = new Date(this.ruleForm.birthday);
      let Y = nows.getFullYear();
      let M = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1);
      let Ys = nows.getFullYear();
      let Ms = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1);
      let D = nows.getDate();
      let h = nows.getHours();
      let m = nows.getMinutes();
      let s = nows.getSeconds();
      let timers = Y + M + D;
      var timer = this.calendar.Lunar.toLunar(Y, M, D);
      // console.log(timer)
      // return
      // var timer = this.getLunarDate(timers);
      // console.log(timer)
      // var nongli = this.toSolar(Y,M,D)
      if (this.ruleForm.timeType == 1) {
        //return "公历  " +  timers+" "+h+":"+m+":"+s;
        this.ruleForm.anotherDate = timer.lunarYear + '-' + timer.lunarMonth + '-' + timer.lunarDay + " " + (h < 10 ? '0' + h : h) + ":" + (m < 10 ? '0' + m : m);

      } else {
        var aaa = calendar.lunar2solar(Ys, Ms, D);
        ///return "农历  " + timers+" "+h+":"+m+":"+s;
        this.ruleForm.anotherDate = aaa.cYear + '-' + aaa.cMonth + '-' + aaa.cDay + " " + (h < 10 ? '0' + h : h) + ":" + (m < 10 ? '0' + m : m);

      }
    },
    getLunarDate (date) { // 阳历转农历
      var lunar = {
        tg: '甲乙丙丁戊己庚辛壬癸',
        dz: '子丑寅卯辰巳午未申酉戌亥',
        number: '一二三四五六七八九十',
        year: '鼠牛虎兔龙蛇马羊猴鸡狗猪',
        month: '正二三四五六七八九十冬腊',
        monthadd: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
        calendar: [0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9,
          0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B,
          0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5,
          0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25,
          0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957,
          0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5,
          0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57,
          0x52B, 0xA93, 0x40E95
        ]
      }
      var year, month, day;
      if (!date) {
        date = new Date(), year = date.getFullYear(), month = date.getMonth(), day = date.getDate();
      } else {
        date = date.split('-'), year = parseInt(date[0]), month = date[1] - 1, day = parseInt(date[2]);
      }

      if (year < 1921 || year > 2020) {
        return {}
      }
      var total, m, n, k, bit, lunarYear, lunarMonth, lunarDay;
      var isEnd = false;
      var tmp = year;
      if (tmp < 1900) {
        tmp += 1900;
      }
      total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + lunar.monthadd[month] + day - 38;
      if (year % 4 == 0 && month > 1) {
        total++;
      }
      for (m = 0; ; m++) {
        k = (lunar.calendar[m] < 0xfff) ? 11 : 12;
        for (n = k; n >= 0; n--) {
          bit = (lunar.calendar[m] >> n) & 1;
          if (total <= 29 + bit) {
            isEnd = true;
            break;
          }
          total = total - 29 - bit;
        }
        if (isEnd) break;
      }
      lunarYear = 1921 + m;
      lunarMonth = k - n + 1;
      lunarDay = total;
      if (k == 12) {
        if (lunarMonth == Math.floor(lunar.calendar[m] / 0x10000) + 1) {
          lunarMonth = 1 - lunarMonth;
        }
        if (lunarMonth > Math.floor(lunar.calendar[m] / 0x10000) + 1) {
          lunarMonth--;
        }
      }

      return {
        lunarYear: lunarYear,
        lunarMonth: lunarMonth,
        lunarDay: lunarDay,
      };
    }
  }
}
</script>

<style scoped>
.wrap {
  font-size: 16px;
  background-color: rgb(241, 242, 249);
  color: #555;
  padding-bottom: 50px;
}

@media screen and (min-width: 0px) and (max-width: 900px) {
  .top-banner {
    background: url(../../assets/images/haibao/brithday-phone.png) no-repeat;
    background-size: 100% 120px;
    height: 120px;
    width: 100%;
    background-position: center;
  }
}
@media (min-width: 900px) {
  .top-banner {
    background: url(../../assets/images/haibao/brithday.png) no-repeat;
    height: 120px;
    background-size: 100% 120px;
    width: 100%;
    background-position: center;
  }
}

.step {
  padding: 25px 0;
}

.step .active {
  color: rgb(56, 81, 210);
}

.step span {
  color: #888;
}

.c-content {
  border-radius: 10px;
  background-color: #fff;
  padding: 20px;
  min-height: 450px;
  padding-top: 50px;
}
.w-202 {
  width: 202px !important;
}
.input {
  width: 200px !important;
}
@media screen and (max-width: 450px) {
  .c-content {
    border-radius: 10px;
    background-color: #fff;
    padding: 10px !important;
    min-height: 500px !important;
  }
  .w-100 {
    width: 100% !important;
  }
  .sumbit-btn {
    width: 100% !important;
  }
}
.icon-wrap {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.icon-wrap .icon {
  width: 100%;
  min-height: 100%;
}

.icon-wrap .choose {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
}

.sex-box .col-grid {
  text-align: center;
}

.sex-box .col-grid .sex {
  margin-top: 15px;
}

.sex-box .col-grid .sex.active {
  color: rgb(65, 81, 210);
}

.sumbit-btn {
  color: #fff;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  width: 300px;
  background-color: rgb(56, 81, 210);
}
</style>
